<template>
	<view class="page">
		<view class="user-apply">
			<view class="user-logo">
				<image src="../../static/images/inspect/logo.png" mode=""></image>
			</view>
			<view class="user-tip">所有信息仅用于申请认证，未经授权绝不外泄</view>
			<view class="user-bg">
				<image src="../../static/images/inspect/apply-bg.png" mode=""></image>
			</view>
		</view>
		<view class="user-warp">
			<u-form :model="form" ref="uForm" label-position="top">
				<u-form-item label="姓名" required :label-style="labelStyle">
					<u-input v-model="form.name" placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item label="工号" required :label-style="labelStyle">
					<u-input v-model="form.jnum" placeholder="请输入工号" />
				</u-form-item>
				<u-form-item label="身份证" required>
					<u-input v-model="form.idCard" placeholder="请输入身份证" />
				</u-form-item>
				<u-form-item label="科室" required :label-style="labelStyle">
					<u-input v-model="form.ks" placeholder="请选择科室" type="select" :list="list" @click="show = true" />
					<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
				</u-form-item>
				<u-form-item label="类型" required :label-style="labelStyle">
					<u-input v-model="form.type" placeholder="请选择类型" type="select" @click="show1 = true" />
					<u-select v-model="show1" :list="list1" @confirm="confirm1"></u-select>
				</u-form-item>
			</u-form>
			<view class="user-foot">
				<button type="default" class="confirm-btn">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					jnum: '',
					idCard: '',
					ks: '',
					type: ''
				},
				labelStyle: {
					color: '#373b4f',
					fontSize: "34rpx",
					lineHeight: "60rpx"
				},
				show: false,
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				show1: false,
				list1: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
			}
		},
		onLoad() {

		},
		methods: {
			confirm(e) {
				this.form.ks = e[0].label
			},
			confirm1(e) {
				this.form.type = e[0].label
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background-color: #fff;
		min-height: calc(100vh - 44px);
	}

	.user-apply {
		background-color: #f7f8fa;
		position: relative;
		height: 306rpx;
	}

	.user-logo {
		text-align: center;
		padding: 10rpx 0;
		font-size: 0;
		position: relative;
		z-index: 11;
	}

	.user-logo image {
		width: 168rpx;
		height: 168rpx;
	}

	.user-tip {
		margin-top: 10rpx;
		text-align: center;
		font-size: 26rpx;
		color: #373b4f;
		line-height: 34rpx;
		position: relative;
		z-index: 11;
	}

	.user-bg {
		position: absolute;
		bottom: 0;
		font-size: 0;
		left: 0;
		width: 100%;
		height: 200rpx;
	}

	.user-bg image {
		width: 100%;
		height: 100%;
	}

	.user-warp {
		padding: 24rpx 56rpx 0;

		.u-form-item {
			padding: 30rpx 0 10rpx;
		}
	}

	.user-foot {
		margin-top: 80rpx;
		padding: 0 24rpx 44rpx;

		.confirm-btn {
			background-color: #009fe8;
			font-size: 30rpx;
			color: #fff;
			height: 94rpx;
			border-radius: 47rpx;
			padding: 22rpx;
			line-height: 50rpx;
		}

		.confirm-btn::after {
			display: none;
		}
	}
</style>
